<script lang="ts" setup>
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
defineOptions({
  name: 'my-input'
})
const emits = defineEmits(['update:modelValue', 'ok'])

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const inputValue = ref(props.modelValue)

const handleInputOk = () => {
  // 处理下数据
  if (!inputValue.value.trim()) {
    // 自动引入插件已经引入了ElMessage
    // @ts-ignore
    ElMessage.warning('你好像没有说话呢！( ͡° ᴥ ͡° ʋ)')
    inputValue.value = ''
    return
  }
  emits('ok', inputValue.value)
  console.log('发送消息了！', inputValue.value)
  inputValue.value = ''
}
</script>

<template>
  <section class="my__input__container">
    <textarea
      type="text"
      class="my__input"
      placeholder="向编程喵提问吧!(´｡✪ω✪｡｀)"
      v-model="inputValue"
      @change="emits('update:modelValue', inputValue)"
      @keydown.enter.prevent="handleInputOk"
    >
    </textarea>
    <div class="my__input__button" :class="{ 'is-empty': !inputValue }" @click="handleInputOk">
      {{ props.loading ? '' : '发送!' }}
      <div class="loader-circle" v-if="props.loading"></div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
@import url('@/styles/animation/loading.scss');
$primary-color: #874ccc;
.my__input__container {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
.my__input {
  flex: 1;
  width: 100%;
  outline: none;
  border-radius: 15px;
  border: none;
  padding: 10px;
  padding-right: 80px;
  font-size: 18px;
  resize: none;
  font-family: '微软雅黑';
}
.my__input__button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  border-radius: 15px;
  border: none;
  outline: none;
  text-align: center;
  line-height: 50px;
  width: 60px;
  height: 50px;
  font-size: 14px;
  font-family: '微软雅黑';
  background-color: var(--primary-color);
  color: #fff;
  transition: all 0.5s;
  &:hover {
    cursor: pointer;
  }
}
.my__input__button.is-empty {
  background-color: lighten($primary-color, 20%);
  &:hover {
    cursor: not-allowed;
  }
}
.loader-cricle {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  z-index: 100;
}
</style>
